.app {
    font-size-adjust: none;
    font-family: helvetica, arial, sans-serif;
    line-height: 200%;
    padding: 6px 20px 30px;
    color: red;
}

.container {
  display: grid;
  grid-auto-columns: 50px;
  grid-auto-rows:  50px;
  margin: 20px;
  background: #fefefe;
  overflow: hidden;
  width: 375px;
  height: 375px;
  grid-gap: 0;

}
/* 三阶 */
.container.container-order-3{
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.container.container-order-4{
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.container.container-order-5{
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}
.container > div{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container >.add {
  border: 1px solid currentColor;
  color: #ccc;
  cursor: pointer;
}
.container >.add.selected {
  background: #f3ffe2;
  border-color: #c3d9ff;
}
.container >.add.hover:not(.selected) {
  background: #ddeafb;
  border-color: #c3d9ff;
}
.container >.add.add1-1 {grid-area: 1 / 1 / 2 / 2;}
.container >.add.add1-2 {grid-area: 1 / 2 / 2 / 3;}
.container >.add.add1-3 {grid-area: 1 / 3 / 2 / 4;}
.container >.add.add1-4 {grid-area: 1 / 4 / 2 / 5;}
.container >.add.add1-5 {grid-area: 1 / 5 / 2 / 6;}
.container >.add.add2-1 {grid-area: 2 / 1 / 3 / 2;}
.container >.add.add2-2 {grid-area: 2 / 2 / 3 / 3;}
.container >.add.add2-3 {grid-area: 2 / 3 / 3 / 4;}
.container >.add.add2-4 {grid-area: 2 / 4 / 3 / 5;}
.container >.add.add2-5 {grid-area: 2 / 5 / 3 / 6;}
.container >.add.add3-1 {grid-area: 3 / 1 / 4 / 2;}
.container >.add.add3-2 {grid-area: 3 / 2 / 4 / 3;}
.container >.add.add3-3 {grid-area: 3 / 3 / 4 / 4;}
.container >.add.add3-4 {grid-area: 3 / 4 / 4 / 5;}
.container >.add.add3-5 {grid-area: 3 / 5 / 4 / 6;}
.container >.add.add4-1 {grid-area: 4 / 1 / 5 / 2;}
.container >.add.add4-2 {grid-area: 4 / 2 / 5 / 3;}
.container >.add.add4-3 {grid-area: 4 / 3 / 5 / 4;}
.container >.add.add4-4 {grid-area: 4 / 4 / 5 / 5;}
.container >.add.add4-5 {grid-area: 4 / 5 / 5 / 6;}
.container >.add.add5-1 {grid-area: 5 / 1 / 6 / 2;}
.container >.add.add5-2 {grid-area: 5 / 2 / 6 / 3;}
.container >.add.add5-3 {grid-area: 5 / 3 / 6 / 4;}
.container >.add.add5-4 {grid-area: 5 / 4 / 6 / 5;}
.container >.add.add5-5 {grid-area: 5 / 5 / 6 / 6;}


.container >.item {
  background: #e91e63;
  color: #fff;
  vertical-align: bottom;
  position: relative;
}

.btn-delete {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  line-height: 1;
  display: flex;
  font-style: normal;
  border-radius: 50%;
  background: #eee;
  justify-content: center;
  align-items: center;
  color: #e91e63;
  cursor: pointer;
}

.container >.item a{
  width: 100%;
  height: 100%;
  display: flex;
}
.container >.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item1{
  /* way1 */
  /* grid-row-start: 1;
      grid-column-start: 2;
      grid-row-end: 3;
      grid-column-end: 4; */
  /* way2 */
  /* grid-row: 1/3;
      grid-column: 2/4; */
  /* way3 */
  grid-area: 1 / 2 / 3 / 4;
  z-index: 1
}
